
<template>
  <div>
    <el-tabs
      class="card-box"
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="表白" name="a">
        <el-row>
          <el-col
            :span="7"
            v-for="(o, index) in mostNewaInfo"
            :key="index"
            :offset="index % 3 == 0 ? 0 : 1"
          >
            <el-card :body-style="{ padding: '10px' }">
              <img
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"
              />
              <div style="padding: 10px">
                <!-- <span>{{o.content.substring(0,10)}}</span> -->
                <span>{{ o.content.substring(0, 6) + "..." }}</span>
                <div class="bottom clearfix">
                  <i class="el-icon-star-on"></i>
                  <time class="time">{{ o.createTime }}</time>
                  <el-button
                    :type="o.colorType"
                    icon="el-icon-star-off"
                    class="bottom button"
                    @click="lightStart('表白',  index)"
                    circle
                  ></el-button>
                  <span class="bottom likeNum">{{ o.likeNum }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="寻物" name="b">
        <el-row>
          <el-col
            :span="7"
            v-for="(o, index) in mostNewbInfo"
            :key="index"
            :offset="index % 3 == 0 ? 0 : 1"
          >
            <el-card :body-style="{ padding: '10px' }">
              <img
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"
              />
              <div style="padding: 10px">
                <span>{{ o.content.substring(0, 6) + "..." }}</span>
                <div class="bottom clearfix">
                  <i class="el-icon-star-on"></i>
                  <time class="time">{{ o.createTime }}</time>
                  <el-button
                    :type="o.colorType"
                    icon="el-icon-star-off"
                    class="bottom button"
                    @click="lightStart('寻物',  index)"
                    circle
                  ></el-button>
                  <span class="bottom likeNum">{{ o.likeNum }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="吐槽" name="c">
        <el-row>
          <el-col
            :span="7"
            v-for="(o, index) in mostNewcInfo"
            :key="index"
            :offset="index % 3 == 0 ? 0 : 1"
          >
            <el-card :body-style="{ padding: '10px' }">
              <img
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"
              />
              <div style="padding: 10px">
                <span>{{ o.content.substring(0, 6) + "..." }}</span>
                <div class="bottom clearfix">
                  <i class="el-icon-star-on"></i>
                  <time class="time">{{ o.createTime }}</time>
                  <el-button
                    :type="o.colorType"
                    icon="el-icon-star-off"
                    class="bottom button"
                    @click="lightStart('吐槽',  index)"
                    circle
                  ></el-button>
                  <span class="bottom likeNum">{{ o.likeNum }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-button
      class="write-pen"
      type="primary"
      icon="el-icon-edit"
      circle
      @click="writeInfoDialogOpen"
    ></el-button>

    <!-- 发送消息的一个对话框 -->
    <el-dialog
      title="编写信息"
      :visible="writeInfoDialogVisible"
      width="35%"
      @close="writeInfoDialogClosed"
    >
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addForm.userName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phoneNumber">
          <el-input v-model="addForm.phoneNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="collage">
          <el-input v-model="addForm.collage" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="label">
          <el-input v-model="addForm.label" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="descInfo">
          <el-input type="textarea" v-model="addForm.descInfo"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="writeInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleWriteInfo">确定</el-button>
      </span>
    </el-dialog>


  <el-backtop target=".card-box" :bottom="50">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>


  </div>
</template>

<script>
export default {
  name: "MostHotCard",
  data() {
    return {


      //显示这个编写这个发表的内容的一个对话框
      strDate:'',
      writeInfoDialogVisible: false,
      addForm: {
        userName: "",
        phoneNumber: "",
        collage: "",
        label: "",
        descInfo: "",
      },
      labelType: "表白",
      addFormRules: {
        descInfo: [
          { required: true, message: "请输入内容名称", trigger: "blur" },
        ],
      },

      activeName: "a",
      mostNewaInfo: [],
      mostNewbInfo: [],
      mostNewcInfo: [],
      currentDate: new Date(),
    };
  },
  methods: {
    async lightStart(a,c){
      let tmpValue = null
      switch (a) {
        case '表白':
          tmpValue = this.mostNewaInfo
          break;
        case '寻物':
          tmpValue = this.mostNewbInfo
          break;
        case '吐槽':
          tmpValue = this.mostNewcInfo
          break;
        default:
          break;
      }
      console.log('===========查看这个寻物的操作=========================');
      console.log(tmpValue);
      console.log('====================================');
      if (tmpValue[c].colorType=='warning') {
        tmpValue[c].colorType='danger';
        tmpValue[c].likeNum=tmpValue[c].likeNum+1
        const { data: res } = await this.$http.post(
        "user/updateLikeNum?id=" +
        tmpValue[c].id+"&likeNum="+tmpValue[c].likeNum);
        if (res!='200') {
          tmpValue[c].likeNum=tmpValue[c].likeNum-1
          return this.$message.error("点赞失败！");
        }
        this.$message.success("点赞成功！");
      }else{
        tmpValue[c].colorType='warning'
        tmpValue[c].likeNum=tmpValue[c].likeNum-1
        const { data: res } = await this.$http.post(
        "user/updateLikeNum?id=" +
        tmpValue[c].id+"&likeNum="+tmpValue[c].likeNum);
        if (res!='200') {
          tmpValue[c].likeNum=tmpValue[c].likeNum+1
          return this.$message.error("取消点赞失败！");
        }
        this.$message.success("取消点赞成功！");
      }

    },
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";

      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      this.strDate = Y + M + D + h + m + s;
      return this.strDate;
    },
    handleClick(tab, event) {
      console.log(
        "============检查这个tab里面的值，然后在这个里面具有很多信息========================"
      );
      switch (tab.paneName) {
        case "a":
          this.labelType = "表白";
          break;
        case "b":
          this.labelType = "寻物";
          break;
        case "c":
          this.labelType = "吐槽";
          break;
        default:
          break;
      }
      console.log(tab);
      // this.labelType =
      console.log("====================================");
    },
    writeInfoDialogClosed() {
      this.$refs.addFormRef.descInfo = "";
      this.writeInfoDialogVisible = false;
    },
    writeInfoDialogOpen() {
      console.log("===================点击的时候进行设置=================");
      console.log(this.labelType);
      console.log("====================================");
      this.addForm.label = this.labelType;
      this.writeInfoDialogVisible = true;
    },
    async handleWriteInfo() {
      //开始发送这个请求的数据，然后进行显示，然后就可以得到这个数据了
      const { data: res } = await this.$http.post(
        "user/addCardInfo?phoneNumber=" +
          this.addForm.phoneNumber +
          "&userName=" +
          this.addForm.userName +
          "&collage=" +
          this.addForm.collage +
          "&label=" +
          this.addForm.label +
          "&descInfo=" +
          this.addForm.descInfo
      );
      if (res != "200") {
        return this.$message.error("添加失败失败！");
      }
      this.$message.success("成功了！！！");

      switch (this.labelType) {
        case "表白":
          this.getMostNewInfo("表白");

          break;
        case "寻物":
          this.getMostNewInfo("寻物");

          break;
        case "吐槽":
          this.getMostNewInfo("吐槽");
          break;
        default:
          break;
      }

      this.$refs.addFormRef.descInfo = "";
      this.writeInfoDialogVisible = false;
    },

    async getMostNewInfo(a) {
      const { data: res } = await this.$http.post(
        "user/getCardInfoByLabelMostNew?label=" + a
      );
      if (res.flag != "200") {
        return this.$message.error("获取数据失败！");
      }
      for (let index = 0; index < res.user.length; index++) {
        res.user[index].createTime = this.timestampToTime(res.user[index].createTime);
      }
      for (let index = 0; index < res.user.length; index++) {
        res.user[index].updateTime = this.timestampToTime(res.user[index].updateTime);
      }
      for (let index = 0; index <res.user.length; index++) {
        res.user[index].colorType='warning'
      }
      console.log("==============输出这个a的值======================");
      console.log(res.user);
      console.log("====================================");

      switch (a) {
        case "表白":
          this.mostNewaInfo = res.user;
          break;
        case "寻物":
          this.mostNewbInfo = res.user;
          break;
        case "吐槽":
          this.mostNewcInfo = res.user;
          break;
        default:
          break;
      }
    },
  },
  created() {
    this.getMostNewInfo("表白");
    this.getMostNewInfo("寻物");
    this.getMostNewInfo("吐槽");
    this.typeColor = Array.apply(null,new Array(1000)).map(function(){return 'warning'})

   

    this.addForm.userName = JSON.parse(
      window.sessionStorage.getItem("user")
    ).principal.username;
    this.addForm.phoneNumber = JSON.parse(
      window.sessionStorage.getItem("user")
    ).principal.phoneNumber;
    this.addForm.collage = JSON.parse(
      window.sessionStorage.getItem("user")
    ).principal.collage;
  },

};
</script>

<style lang="less"  scoped>
.write-pen {
  position: relative;
  top: -15px;
  left: 50%;
}

.time {
  font-size: 13px;
  color: #999;
  padding-top: 20px;
}

.bottom {
  margin-top: 8px;
  line-height: 8px;
}

.button {
  margin-top: -5px;
  padding: 0;
  float: right;
}

.likeNum {
  padding-left: 30px;
  color: rgb(175, 30, 54);
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-box {
  height: 500px;
  overflow: auto;
}
</style>
